<!--
 * @Author: ningjz
 * @Date: 2022-04-11 18:05:44
 * @Description: 重要商品价格
-->
<template>
  <div class="left-lower">
    <com-box :title="title">
      <loading v-show="loading" />
      <div class="Price-unite-time">
        <div class="time">{{ unit }}</div>
      </div>
      <div style="width: 95%; margin: auto">
        <div class="Header">
          <span style="text-align: center">{{ header.name }}</span>
          <span>{{ header.value1 }}</span>
          <span>{{ header.value2 }}</span>
          <span>{{ header.value3 }}</span>
        </div>
        <div class="main">
          <el-scrollbar
            height="254px"
            ref="scrollbar"
            @scroll="handleScroll"
            @mouseover="stopScroll"
            @mouseout="startScroll"
          >
            <ul>
              <li
                v-for="(item, index) in CurrentPriceList"
                :key="index"
                :style="{ background: item.background }"
              >
                <span class="name">
                  {{ item.name }}
                </span>
                <span>
                  <p v-if="item.value1">{{ item.value1 }}</p>
                </span>
                <span>
                  <p v-if="item.value2">{{ item.value2 }}</p>
                </span>
                <span>
                  <p v-if="item.value3" class="flex-p">
                    <span class="flex-item">{{ item.value3 }}</span>
                    <span v-if="item.value3 == '--'"></span>
                    <img
                      src="../../img/down.png"
                      v-else-if="item.value3.indexOf('-') > -1"
                    />
                    <img src="../../img/up.png" v-else />
                  </p>
                </span>
              </li>
            </ul>
          </el-scrollbar>
        </div>
      </div>
    </com-box>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  onBeforeUnmount,
  ref,
  watch
} from 'vue'
import comBox from '@/components/comBox/comBox2.vue'
import loading from '@/charts/loading.vue'
import httpRequest from '@/service'
interface IMenuData {
  goodsName: string
  goodsCode: string
  avgPrice: string
  avgPriceTwo: string
  avgPriceThree: string
  avgPriceFour?: string
  avgPriceD2D: string
  avgPriceD2DTwo: string
  avgPriceD2DThree: string
  avgPriceD2DFour?: string
}
interface IState {
  timerFlag: boolean
  time: string
  title: string
  header: any
  unit: string
  loading: boolean
  CurrentPriceList: IMenuData[]
  categoryIndex: string
  carouselTimer: any
  timer: any
  getCurrentPrice: (val?: any) => void
}
export default defineComponent({
  name: 'leftLower',
  props: {
    date: {
      type: String,
      defalut: ''
    }
  },
  components: {
    comBox,
    loading
  },
  setup(props, { emit }) {
    const state: any = reactive({
      timerFlag: true,
      time: '',
      title: '',
      unit: '',
      header: {}, //表头
      CurrentPriceList: [],
      loading: false,
      categoryIndex: '',
      carouselTimer: null,
      timer: null,
      getCurrentPrice: (params: any) => {
        state.loading = true
        state.CurrentPriceList = []
        httpRequest
          .get({
            url: 'M2P2YDZQK',
            params
          })
          .then((res) => {
            if (res.code == 200) {
              state.title = res.title
              state.unit = res.unit
              state.header = res.map
              res.data.forEach((i: { name: string }) => {
                if (i.name.length > 8) {
                  let newStr =
                    i.name.substring(0, 6) + '\n' + i.name.substring(6)
                  i.name = newStr
                }
              })
              state.CurrentPriceList = res.data
              // state.categoryIndex = res.data[0].goodsCode
            }
            setTimeout(() => {
              state.loading = false
            }, 200)
          })
          .catch(() => {
            console.log('请求失败')
            state.loading = false
          })
      }
    })

    const scrollbar = ref()
    let curScrollTop = 0
    onMounted(() => {
      onScroll()
      state.getCurrentPrice({ year: props.date })
    })
    const onScroll = () => {
      state.timer = setInterval(() => {
        if (state.timerFlag) {
          curScrollTop++
          scrollbar.value?.setScrollTop(curScrollTop)
        }
        if (
          scrollbar.value &&
          curScrollTop - scrollbar.value.wrap$.scrollTop > 1
        ) {
          curScrollTop = 0
        }
      }, 50)
    }
    const stopScroll = () => {
      state.timerFlag = false
    }
    const startScroll = () => {
      state.timerFlag = true
      if (scrollbar.value) {
        curScrollTop = scrollbar.value.wrap$.scrollTop
      }
    }
    // 滚动时触发
    const handleScroll = (pos: any) => {
      curScrollTop = pos.scrollTop
    }
    onBeforeUnmount(() => {
      clearInterval(state.timer)
    })
    watch(
      () => props.date,
      (newVal) => {
        state.getCurrentPrice({ year: props.date })
      }
    )
    // const refreshData = () => {
    //   state.getCurrentPrice({ classId: props.classId })
    // }
    return {
      ...toRefs(state),
      stopScroll,
      startScroll,
      handleScroll,
      scrollbar
      // refreshData
    }
  }
})
</script>
<style lang="less" scoped>
.left-lower {
  margin-top: 15px;
  height: 486px;
  // overflow: hidden;
  ::v-deep(.slot-box) {
    padding-bottom: 20px;
  }
}
// 单位
.Price-unite-time {
  font-family: 'Microsoft YaHei';
  color: rgba(227, 246, 255, 0.902);
  text-align: right;
  font-size: 14px;
  line-height: 1.714;
  display: flex;
  align-items: center;
  .unite {
    margin-left: 18px;
    p {
      font-size: 18px;
      text-align: left;
      color: rgb(1, 251, 245);
      position: relative;
    }
  }
  .time {
    align-content: center;
    font-size: 18px;
    color: rgb(1, 251, 245);
    margin-left: 15px;
    margin-top: -5px;
    margin-bottom: 6px;
  }
}
.main {
  height: calc(100% - 51px);
  .main-unit {
    color: #fff;
    white-space: nowrap;
    transform: scale(0.8);
    font-weight: 500;
  }
}
ul {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  li {
    display: flex;
    height: 48px;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
    span {
      width: 25%;
      // text-align: center;
      text-align: right;
    }
    p {
      font-size: 16px;
      font-family: 'Microsoft YaHei';
      color: #fff;
      word-break: break-all;
    }
    .red {
      font-size: 16px;
      font-weight: 500;
      color: rgb(255, 38, 38);
    }
    .green {
      font-weight: 500;
      font-size: 16px;
      color: #02ffb5;
    }
    .white {
      color: #fff;
    }
    .name-box {
      font-size: 14px;
      font-family: 'Microsoft YaHei';
      color: rgb(255, 192, 111);
      font-weight: bold;
    }

    .name {
      font-size: 16px;
      font-family: 'Microsoft YaHei';
      color: #fff;
      font-weight: bold;
      white-space: pre-line;
      text-align: center;
    }
    .flex-p {
      display: flex;
      flex-direction: row;
      vertical-align: middle;
      justify-content: center;
      img {
        margin-left: 2px;
      }
      .flex-item {
        width: 80%;
        text-align: right;
        padding-right: 2px;
      }
    }
  }
}

.Header {
  background-color: rgba(30, 90, 214, 0.8) !important;
  height: 51px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 10px;
  border-radius: 10px;
  span {
    width: 20%;
    white-space: pre-line;
    font-size: 18px;
    font-family: 'Microsoft YaHei';
    color: rgb(222, 255, 255);
    font-weight: bold;
    line-height: 1.714;
    text-align: right;
  }
}
li:nth-child(even) {
  height: 38px;
  background-color: rgba(62, 108, 245, 0.2);
}
li:nth-child(odd) {
  width: 100%;
  height: 43px;
}

::v-deep(.com-box .slot-box) {
  height: calc(100% - 55px);
}
.red {
  p {
    font-size: 16px;
    font-weight: 550;
    color: rgb(255, 38, 38);
  }
}
.green {
  p {
    font-weight: 550;
    font-size: 16px;
    // color: #02ffb5;
    color: rgb(66, 255, 0);
  }
}
</style>
